<!doctype html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>新标签页</title>
		<link rel="stylesheet" type="text/css" href="css/cowtab.css" />
		<script src="js/jquery-3.6.0.min.js"></script>
		<script src="js/cowtab.js"></script>
	</head>
	<body>
		<!-- 背景视频 -->
		<video id="video" controls="controls" loop="loop" muted autoplay="autoplay">
			<source src="" type="video/webm">
			<source src="" type="video/mp4">
			<source src="" type="video/ogg">
		</video>
		
		<!-- 设置按钮 -->
		<div id="settingsButton" class="settings-button">
			<span class="settings-icon">⚙️</span>
		</div>
		
		<!-- 设置面板 -->
		<div id="settingsPanel" class="settings-panel">
			<div class="panel-header">
				<h3>设置</h3>
				<span id="closeSettings" class="close-btn">×</span>
			</div>
			
			<div class="setting-item">
				<h4>隐藏搜索框</h4>
				<div class="switch-box">
					<input id="switchButton" type="checkbox" class="switch" />
					<label for="switchButton"></label>
				</div>
			</div>
			
			<div class="setting-item">
				<h4>隐藏时间</h4>
				<div class="switch-box">
					<input id="timeButton" type="checkbox" class="switch" />
					<label for="timeButton"></label>
				</div>
			</div>
			
			<div class="setting-item">
				<h4>自定义壁纸</h4>
				<label for="file" class="upload-btn">上传壁纸</label>
				<input id="file" type="file" style="display: none;" />
				<div class="wallpaper-info">
					<p class="small-text">支持格式：图片（包括GIF）、视频（MP4、WebM、OGG）</p>
					<p class="small-text">建议大小：最高10MB，以获得更好的性能体验</p>
				</div>
				<div id="clearCustomWallpaperContainer" style="margin-top: 10px; display: none;">
					<button id="clearCustomWallpaper" class="clear-btn">清除自定义壁纸</button>
				</div>
			</div>
			
		</div>
		
		<!-- 时间显示 -->
		<div id="timeDisplay" class="time-display"></div>
		
		<!-- 搜索框 -->
		<div id="searchContainer" class="search-container">
		    <form action="https://www.baidu.com/s">
		        <!-- 搜索引擎切换 -->
		        <div class="search-engine-selector">
		            <div id="searchEngineIcon" class="search-engine-icon">
		                <img src="img/baidu.png" alt="百度" class="engine-icon-img">
		                <span class="dropdown-arrow">▼</span>
		            </div>
		            <div id="searchEngineDropdown" class="search-engine-dropdown">
		                <div class="engine-option" data-engine="baidu">
		                    <img src="img/baidu.png" alt="百度" class="engine-option-img">
		                    <span>百度</span>
		                </div>
		                <div class="engine-option" data-engine="bing">
		                    <img src="img/bing.png" alt="必应" class="engine-option-img">
		                    <span>必应</span>
		                </div>
		                <div class="engine-option" data-engine="yandex">
		                    <img src="img/yandex.png" alt="Yandex" class="engine-option-img">
		                    <span>Yandex</span>
		                </div>
		                <div class="engine-option" data-engine="so">
		                    <img src="img/360.png" alt="360搜索" class="engine-option-img">
		                    <span>360搜索</span>
		                </div>
		                <div class="engine-option" data-engine="sogou">
		                    <img src="img/sogo.png" alt="搜狗" class="engine-option-img">
		                    <span>搜狗</span>
		                </div>
		            </div>
		        </div>
		        <input type="text" name="wd">
		    </form>
		</div>
	</body>
</html>